import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import * as DiscountBadgeStories from "./discount-badge.component.stories";

<Meta of={DiscountBadgeStories} />

# Discount Badge

A reusable UI component for displaying discount information (percentage or fixed amount) in a badge
format.

<Canvas of={DiscountBadgeStories.PercentDiscount} />

## Usage

The discount badge component is designed to be used in billing and subscription interfaces to
display discount information.

```ts
import { DiscountBadgeComponent, DiscountInfo } from "@bitwarden/pricing";
```

```html
<billing-discount-badge [discount]="discountInfo"></billing-discount-badge>
```

## API

### Inputs

| Input      | Type                   | Description                                                                      |
| ---------- | ---------------------- | -------------------------------------------------------------------------------- |
| `discount` | `DiscountInfo \| null` | **Optional.** Discount information object. If null or inactive, badge is hidden. |

### DiscountInfo Interface

```ts
interface DiscountInfo {
  /** Whether the discount is currently active */
  active: boolean;
  /** Percentage discount (0-100 or 0-1 scale) */
  percentOff?: number;
  /** Fixed amount discount in the base currency */
  amountOff?: number;
}
```

## Behavior

- The badge is only displayed when `discount` is provided, `active` is `true`, and either
  `percentOff` or `amountOff` is greater than 0.
- If both `percentOff` and `amountOff` are provided, `percentOff` takes precedence.
- Percentage values can be provided as 0-100 (e.g., `20` for 20%) or 0-1 (e.g., `0.2` for 20%).
- Amount values are formatted as currency (USD) with 2 decimal places.

## Examples

### Percentage Discount

<Canvas of={DiscountBadgeStories.PercentDiscount} />

### Amount Discount

<Canvas of={DiscountBadgeStories.AmountDiscount} />

### Inactive Discount

<Canvas of={DiscountBadgeStories.InactiveDiscount} />
